<template>
  <div class="app-container process-list">
    <tab v-model="activeIndex" :animate="false" class='tab'>
      <tab-item  selected @on-item-click="onItemClick">抢单列表</tab-item>
      <tab-item @on-item-click="onItemClick">处理列表</tab-item>
    </tab>{{swiperHeight}}
    <swiper v-model="activeIndex" :show-dots="false" :height="swiperHeight">
      <swiper-item class="swiper-item">
        <group class="tab-swiper vux-center">
          <template v-for="(item,index) in list1" >
            <cell
            :title="item.title" 
            :link="{path:'/guide'}" 
            :key="index">
            <span slot="title">{{item.title}}</span>
            <p slot="inline-desc">逾期金额: <span class='red'>{{item.money}}</span> </p>
            </cell>
          </template>
        </group>
      </swiper-item>
      <swiper-item>
        <group class="tab-swiper vux-center">
          <template v-for="(item,index) in list2" >
            <cell
            :title="item.title" 
            :link="{path:'/guide'}" 
            :key="index">
            <span slot="title">{{item.title}}</span>
            <p slot="inline-desc">逾期金额: <span class='red'>{{item.money}}</span> </p>
            <span>查看详情</span>
            </cell>
          </template>
        </group>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import { Tab, TabItem, Swiper, SwiperItem, Group, Cell, CellBox } from 'vux'

export default {
  data () {
    return {
      activeIndex: 0,
      swiperHeight: '',
      list1: [{
        title: '资产包1',
        money: '11,222.00'
      }, {
        title: '资产包2',
        money: '11,522.00'
      }, {
        title: '资产包3',
        money: '131,222.00'
      }, {
        title: '资产包4',
        money: '113,111.11'
      }, {
        title: '资产包5',
        money: '113,111.11'
      }, {
        title: '资产包6',
        money: '113,111.11'
      }, {
        title: '资产包7',
        money: '113,111.11'
      }, {
        title: '资产包8',
        money: '113,111.11'
      }, {
        title: '资产包9',
        money: '113,111.11'
      }, {
        title: '资产包10',
        money: '113,111.11'
      }, {
        title: '资产包10',
        money: '113,111.11'
      }, {
        title: '资产包10',
        money: '113,111.11'
      }, {
        title: '资产包10',
        money: '113,111.11'
      }, {
        title: '资产包10',
        money: '113,111.11'
      }, {
        title: '资产包10',
        money: '113,111.11'
      }, {
        title: '资产包22',
        money: '113,111.11'
      } ],
      list2: [{
        title: '资产包1',
        money: '11,222.00'
      }, {
        title: '资产包2',
        money: '11,522.00'
      }, {
        title: '资产包3',
        money: '131,222.00'
      }, {
        title: '资产包4',
        money: '113,111.11'
      }]
    }
  },
  components: {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Group,
    CellBox,
    Cell
  },
  watch: {
    activeIndex: function (val) {
      this.comHeight(val)
      console.log('watch==' + this.swiperHeight + 'val==' + val)
    }
  },
  created () {
  },
  computed: {
  },
  mounted () {
    this.comHeight(this.activeIndex)
  },
  updated: function () {
    this.$nextTick(function () {
      // Code that will run only after the
      // entire view has been re-rendered
    })
  },
  methods: {
    onItemClick (index) {
      this.activeIndex = index
    },
    comHeight (val) {
      let dom = document.getElementsByClassName('tab-swiper')[val]
      let domHeight = dom.offsetHeight
      this.swiperHeight = domHeight + 'px'
      console.log('this.height==' + this.swiperHeight)
    }
  }
}
</script>
<style scoped lang="less">
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/center.less';
.process-list{
  .tab{
    .vux-tab-item{
      font-size: 1rem;
    }
    .vux-tab-item.vux-tab-selected{
      color: rgb(55, 174, 252) !important;
      border-color: rgb(55, 174, 252) !important;
    }
  }
  .vux-label-desc{
    .red{
      color:#FF0707;
    }
  }
  .tab-swiper{
    width: 100%;
    float: left;
  }
  .vux-swiper{
    font-size: 12px;
  }
  


}

</style>
<style lang="less">
.process-list{
  .vux-no-group-title,.weui-cells{
    width:100%!important;
  }
  .weui-cells{
    font-size:12px;
    .vux-label-desc{
      font-size:14px;
    }
  }
  .weui-cell_access{
    .weui-cell__ft{
      color:#468DF3;
      &:after{
        border-color: #468DF3;
      }
    }
  }



}
</style>